import ImagePreview from './Separator/ImagePreview';
import LayerBox from './Separator/LayerListBox';
import { Flex } from '@chakra-ui/react';
import Hero from './Separator/Hero';
// import PanZoomCompare from './PanZoomCompare';
import { ImageUploaderTriggerContext } from './ImageUploader/ImageUploaderTriggerContext';
import { useContext } from 'react';
import ImagesUploader from './ImageUploader';

function ColorSeparatorMain() {
  const { file } = useContext(ImageUploaderTriggerContext);

  return (
    <Flex w="full" p="3" h="calc(100vh - 75px)">
      {!file ? (
        <Hero />
      ) : (
        <>
          <ImagePreview />
          <LayerBox />
        </>
      )}
    </Flex>
  );
}

const ColorSeparator = () => (
  <ImagesUploader>
    <ColorSeparatorMain />
  </ImagesUploader>
);

export default ColorSeparator;
